<template>
  <div class="process-diagram">
    <div class="process-header">
      <h3>客户审批流程图</h3>
      <div class="process-status">
        <el-tag :type="getStatusTag(currentStatus)">
          {{ getStatusText(currentStatus) }}
        </el-tag>
      </div>
    </div>
    
    <div class="process-flow">
      <!-- 开始节点 -->
      <div class="process-node start-node">
        <div class="node-circle">
          <el-icon><VideoPlay /></el-icon>
        </div>
        <div class="node-label">开始</div>
      </div>
      
      <!-- 流程步骤 -->
      <div
        v-for="(step, index) in processSteps"
        :key="step.id"
        class="process-step"
        :class="step.status"
      >
        <!-- 连接线 -->
        <div class="step-connector" v-if="index > 0">
          <div class="connector-line"></div>
          <div class="connector-arrow">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
        
        <!-- 决策网关 -->
        <div v-if="step.gateway" class="gateway-node">
          <div class="gateway-shape">
            <el-icon><SwitchButton /></el-icon>
          </div>
          <div class="node-label">{{ step.gatewayName }}</div>
        </div>
        
        <!-- 用户任务节点 -->
        <div v-if="!step.gateway" class="task-node">
          <div class="node-circle" :class="step.status">
            <el-icon v-if="step.status === 'completed'">
              <Check />
            </el-icon>
            <el-icon v-else-if="step.status === 'current'">
              <Loading />
            </el-icon>
            <el-icon v-else-if="step.status === 'rejected'">
              <Close />
            </el-icon>
            <span v-else>{{ index + 1 }}</span>
          </div>
          <div class="node-content">
            <div class="node-label">{{ step.name }}</div>
            <div v-if="step.assignee" class="node-assignee">
              负责人：{{ step.assignee }}
            </div>
            <div v-if="step.comment" class="node-comment">
              {{ step.comment }}
            </div>
          </div>
        </div>
      </div>
      
      <!-- 结束节点 -->
      <div class="process-node end-node">
        <div class="node-circle" :class="endNodeStatus">
          <el-icon v-if="endNodeStatus === 'success'">
            <Check />
          </el-icon>
          <el-icon v-else-if="endNodeStatus === 'failed'">
            <Close />
          </el-icon>
          <el-icon v-else>
            <CircleCheckFilled />
          </el-icon>
        </div>
        <div class="node-label">{{ endNodeLabel }}</div>
      </div>
    </div>
    
    <!-- 流程说明 -->
    <div class="process-legend">
      <div class="legend-item">
        <div class="legend-circle completed"></div>
        <span>已完成</span>
      </div>
      <div class="legend-item">
        <div class="legend-circle current"></div>
        <span>进行中</span>
      </div>
      <div class="legend-item">
        <div class="legend-circle rejected"></div>
        <span>已拒绝</span>
      </div>
      <div class="legend-item">
        <div class="legend-circle pending"></div>
        <span>待处理</span>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { 
  VideoPlay, 
  ArrowRight, 
  SwitchButton, 
  Check, 
  Close, 
  Loading, 
  CircleCheckFilled 
} from '@element-plus/icons-vue'

export default {
  name: 'CustomerProcessDiagram',
  components: {
    VideoPlay,
    ArrowRight,
    SwitchButton,
    Check,
    Close,
    Loading,
    CircleCheckFilled
  },
  props: {
    // 当前流程状态
    currentStatus: {
      type: String,
      default: 'PENDING'
    },
    // 当前步骤
    currentStep: {
      type: String,
      default: ''
    },
    // 审批结果
    approvalResult: {
      type: String,
      default: ''
    },
    // 流程实例ID
    processInstanceId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    // 根据BPMN文件定义的流程步骤
    const processSteps = computed(() => {
      const steps = [
        {
          id: 'taskFillInfo',
          name: '销售员填写客户资料',
          assignee: '申请人',
          gateway: false,
          status: 'completed'
        },
        {
          id: 'gateway1',
          gateway: true,
          gatewayName: '地区经理决策',
          status: 'pending'
        },
        {
          id: 'taskManagerApprove',
          name: '地区经理审批',
          assignee: '地区经理',
          gateway: false,
          status: 'pending'
        },
        {
          id: 'gateway2',
          gateway: true,
          gatewayName: '大区经理决策',
          status: 'pending'
        },
        {
          id: 'taskDirectorApprove',
          name: '大区经理审批',
          assignee: '大区经理',
          gateway: false,
          status: 'pending'
        },
        {
          id: 'gateway3',
          gateway: true,
          gatewayName: '信用控制组决策',
          status: 'pending'
        },
        {
          id: 'taskCreditControl',
          name: '信用控制组审批',
          assignee: '信用控制组',
          gateway: false,
          status: 'pending'
        },
        {
          id: 'gateway4',
          gateway: true,
          gatewayName: '销售总监决策',
          status: 'pending'
        },
        {
          id: 'taskSalesDirector',
          name: '销售总监审批',
          assignee: '销售总监',
          gateway: false,
          status: 'pending'
        },
        {
          id: 'gateway5',
          gateway: true,
          gatewayName: '公司商务决策',
          status: 'pending'
        },
        {
          id: 'taskBusinessConfirm',
          name: '公司商务人员审核',
          assignee: '公司商务人员',
          gateway: false,
          status: 'pending'
        }
      ]
      
      // 根据当前状态和步骤更新流程状态
      updateProcessStatus(steps)
      
      return steps
    })
    
    // 更新流程状态
    const updateProcessStatus = (steps) => {
      const currentStep = props.currentStep
      const approvalResult = props.approvalResult
      const currentStatus = props.currentStatus
      
      // 步骤映射
      const stepMapping = {
        'SALES_FILL': 'taskFillInfo',
        'REGION_MANAGER_APPROVAL': 'taskManagerApprove',
        'AREA_MANAGER_APPROVAL': 'taskDirectorApprove',
        'CREDIT_CONTROL_APPROVAL': 'taskCreditControl',
        'SALES_DIRECTOR_APPROVAL': 'taskSalesDirector',
        'COMPANY_BUSINESS_APPROVAL': 'taskBusinessConfirm'
      }
      
      // 找到当前步骤的索引
      let currentIndex = -1
      if (currentStep && stepMapping[currentStep]) {
        currentIndex = steps.findIndex(step => step.id === stepMapping[currentStep])
      }
      
      // 设置步骤状态
      steps.forEach((step, index) => {
        if (step.gateway) {
          // 网关节点根据前后步骤状态确定
          step.status = 'pending'
        } else {
          if (index < currentIndex) {
            step.status = 'completed'
          } else if (index === currentIndex) {
            if (approvalResult === 'REJECTED' || currentStatus === 'REJECTED') {
              step.status = 'rejected'
            } else {
              step.status = 'current'
            }
          } else {
            step.status = 'pending'
          }
        }
      })
      
      // 如果整个流程已完成
      if (currentStatus === 'APPROVED') {
        steps.forEach(step => {
          if (!step.gateway) {
            step.status = 'completed'
          }
        })
      }
    }
    
    // 结束节点状态
    const endNodeStatus = computed(() => {
      if (props.currentStatus === 'APPROVED') {
        return 'success'
      } else if (props.currentStatus === 'REJECTED') {
        return 'failed'
      }
      return 'pending'
    })
    
    // 结束节点标签
    const endNodeLabel = computed(() => {
      if (props.currentStatus === 'APPROVED') {
        return '审批通过'
      } else if (props.currentStatus === 'REJECTED') {
        return '审批拒绝'
      }
      return '流程结束'
    })
    
    // 获取状态标签类型
    const getStatusTag = (status) => {
      const statusMap = {
        'PENDING': 'warning',
        'APPROVED': 'success',
        'REJECTED': 'danger',
        'CANCELLED': 'info'
      }
      return statusMap[status] || 'info'
    }
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'PENDING': '审批中',
        'APPROVED': '已通过',
        'REJECTED': '已拒绝',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    }
    
    return {
      processSteps,
      endNodeStatus,
      endNodeLabel,
      getStatusTag,
      getStatusText
    }
  }
}
</script>

<style scoped>
.process-diagram {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.process-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e4e7ed;
}

.process-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.process-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 400px;
}

.process-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
  position: relative;
}

.node-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.start-node .node-circle {
  background: linear-gradient(135deg, #67C23A, #85CE61);
  color: white;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.end-node .node-circle {
  background: linear-gradient(135deg, #409EFF, #66B1FF);
  color: white;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.end-node .node-circle.success {
  background: linear-gradient(135deg, #67C23A, #85CE61);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.end-node .node-circle.failed {
  background: linear-gradient(135deg, #F56C6C, #F78989);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

.node-label {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  text-align: center;
  max-width: 120px;
  line-height: 1.4;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
  position: relative;
  width: 100%;
}

.step-connector {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.connector-line {
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom, #e4e7ed, #c0c4cc);
}

.connector-arrow {
  color: #909399;
  font-size: 16px;
  margin-top: 5px;
}

.gateway-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.gateway-shape {
  width: 40px;
  height: 40px;
  background: #f0f2f5;
  border: 2px solid #d9d9d9;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.gateway-shape .el-icon {
  transform: rotate(-45deg);
  color: #909399;
  font-size: 16px;
}

.task-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.task-node .node-circle {
  background: #e4e7ed;
  color: #909399;
  border: 2px solid #d9d9d9;
}

.task-node .node-circle.completed {
  background: linear-gradient(135deg, #67C23A, #85CE61);
  color: white;
  border-color: #67C23A;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.task-node .node-circle.current {
  background: linear-gradient(135deg, #409EFF, #66B1FF);
  color: white;
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  animation: pulse 2s infinite;
}

.task-node .node-circle.rejected {
  background: linear-gradient(135deg, #F56C6C, #F78989);
  color: white;
  border-color: #F56C6C;
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

.node-content {
  text-align: center;
  max-width: 150px;
}

.node-assignee,
.node-comment {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.3;
}

.process-legend {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

.legend-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid;
}

.legend-circle.completed {
  background: #67C23A;
  border-color: #67C23A;
}

.legend-circle.current {
  background: #409EFF;
  border-color: #409EFF;
}

.legend-circle.rejected {
  background: #F56C6C;
  border-color: #F56C6C;
}

.legend-circle.pending {
  background: #e4e7ed;
  border-color: #d9d9d9;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .process-flow {
    padding: 0 10px;
  }
  
  .node-label {
    font-size: 12px;
    max-width: 100px;
  }
  
  .process-legend {
    flex-wrap: wrap;
    gap: 15px;
  }
}
</style>
